<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="编辑地址"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 地址填写组件 -->
            <div class="address-input">
                <div class="input-item">
                    <span class="input-name">收货人</span>
                    <input
                        class="input-box"
                        type="text"
                        placeholder="请填写收货人"
                        v-model="name"
                        @blur="goBottom"
                    />
                </div>
                <div class="input-item">
                    <span class="input-name">手机号码</span>
                    <input
                        class="input-box"
                        type="tel"
                        placeholder="请填写手机号码"
                        v-model="phone"
                        @blur="checkPhone(phone)"
                    />
                </div>
                <div class="input-item">
                    <span class="input-name">所在地区</span>
                    <div
                        id="areaSelectResult"
                        class="input-box"
                        @click="showAreaPicker = true"
                    >
                        <span v-if="isEmpty">{{selectData.provinceActiveName}} {{selectData.cityActiveName}} {{selectData.areaActiveName}}</span>
                        <span v-else>{{regionTxt}}</span>
                    </div>
                </div>
                <textarea
                    class="textarea-input"
                    placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等"
                    v-model="address"
                    @blur="goBottom"
                ></textarea>
            </div>
            <!-- 地址填写组件 -->

            <!-- 设置默认地址组件 -->
            <div class="set-default-box">
                <span class="set-default-name">设置默认地址</span>
                <el-switch
                    v-model="isDefault"
                    active-color="#13ce66"
                    inactive-color="#ccc"
                >
                </el-switch>
            </div>
            <!-- 设置默认地址组件 -->

            <!-- 删除地址组件 -->
            <div
                class="delete-address-btn"
                @click="deleteAddress"
            >删除收货地址</div>
            <!-- 删除地址组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 保存地址组件 -->
        <div
            class="save-address-btn"
            @click="saveAddress"
        >保存</div>
        <!-- 保存地址组件 -->

        <!-- 共用地区选择组件 -->
        <area-picker
            :showAreaPicker="showAreaPicker"
            @selectResult="selectResult"
            @closePicker="closePicker"
        ></area-picker>
        <!-- 共用地区选择组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import AreaPicker from '@/components/AreaPicker'
import commonDialog from '@/assets/js/dialog'
import axios from 'axios'
import qs from 'qs'
export default {
    name: 'EditAddress',
    components: {
        CommonHeader,
        CommonScroll,
        AreaPicker
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.3rem'
            },
            addressInfo: '',
            name: '',
            phone: '',
            address: '',
            regionTxt: '',
            isDefault: false,
            selectData: {
                provinceActiveId: '',
                cityActiveId: '',
                areaActiveId: '',
                provinceActiveName: '',
                cityActiveName: '',
                areaActiveName: ''
            },
            showAreaPicker: false
        }
    },
    mounted() {
        this.getAddressInfo()
    },
    methods: {
        getAddressInfo() {
            if (typeof this.$route.query.addressInfo == 'string') {
                this.$router.back(-1)
            }
            this.addressInfo = this.$route.query.addressInfo
            this.name = this.addressInfo.name
            this.phone = this.addressInfo.phone
            this.address = this.addressInfo.detail
            this.regionTxt = this.addressInfo.region_txt
            this.isDefault = this.addressInfo.is_default == 0 ? false : true
            this.selectData = {
                provinceActiveId: this.addressInfo.region_1,
                cityActiveId: this.addressInfo.region_2,
                areaActiveId: this.addressInfo.region_3,
                provinceActiveName: '',
                cityActiveName: '',
                areaActiveName: ''
            }
        },
        selectResult(data) {
            this.selectData = data
        },
        closePicker() {
            this.showAreaPicker = false
        },
        saveAddress() {
            if (this.name == null) {
                this.commonDialog.alert('提示', '请输入收货人姓名！')
                return
            }
            if (this.phone == null) {
                this.commonDialog.alert('提示', '请输入收货人手机号码！')
                return
            }
            if (this.selectData == null) {
                this.commonDialog.alert('提示', '请选择收货省市区！')
                return
            }
            if (this.address == null) {
                this.commonDialog.alert('提示', '请选择收货详细地址！')
                return
            }
            if (!/^1\d{10}$/.test(this.phone)) {
                this.commonDialog.alert('提示', '手机号码有误，请重新填写！')
                return
            }
            let postData = this.qs.stringify({
                id: this.addressInfo.id,
                is_default: this.default,
                name: this.name,
                phone: this.phone,
                region_1: this.selectData.provinceActiveId,
                region_2: this.selectData.cityActiveId,
                region_3: this.selectData.areaActiveId,
                detail: this.address
            })
            this.axios
                .post('/api/user/address/save.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        const that = this
                        this.commonDialog.alert(
                            '提示',
                            '保存地址成功！',
                            function() {
                                that.goAddress()
                            }
                        )
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        deleteAddress() {
            const that = this
            this.commonDialog.confirm('提示', '是否删除地址？', function() {
                that.delete()
            })
        },
        delete() {
            let postData = this.qs.stringify({
                id: this.addressInfo.id
            })
            this.axios
                .post('/api/user/address/del.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        const that = this
                        this.commonDialog.alert(
                            '提示',
                            '删除地址成功！',
                            function() {
                                that.goAddress()
                            }
                        )
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        goAddress() {
            this.$router.back(-1)
        },
        checkPhone(value) {
            this.goBottom()
            if (!/^1\d{10}$/.test(value)) {
                this.commonDialog.alert('提示', '手机号码有误，请重新填写！')
            }
        },
        goBottom() {
            window.scroll(0, 0)
        }
    },
    computed: {
        default() {
            return this.isDefault == true ? 1 : 0
        },
        isEmpty() {
            return this.selectData.provinceActiveName == '' ? false : true
        }
    }
}
</script>

<style lang="stylus" scoped>
.address-input
    background #fff
    .input-item
        display flex
        align-items center
        height 1.09rem
        padding 0 0.37rem
        border-bottom 1px solid #e5e5e5
        .input-name
            width 2rem
            font-size 0.33rem
            color #333
        .input-box
            flex 1
            font-size 0.33rem
            color #666
            outline none
            border none
        .input-box::-webkit-input-placeholder
            color #ccc
    .textarea-input
        width 100%
        padding 0.37rem
        height 2.22rem
        font-size 0.33rem
        color #666
        box-sizing border-box
        resize none
    .textarea-input::-webkit-input-placeholder
        color #ccc
.set-default-box
    display flex
    align-items center
    justify-content space-between
    height 1.11rem
    padding 0 0.37rem
    background #fff
    margin-top 0.18rem
    .set-default-name
        font-size 0.33rem
        color #333
.delete-address-btn
    margin-top 0.18rem
    height 1.11rem
    line-height 1.11rem
    padding 0 0.37rem
    font-size 0.33rem
    color #d7463c
    background #fff
.save-address-btn
    position absolute
    bottom 0
    left 0
    right 0
    height 1.3rem
    line-height 1.3rem
    text-align center
    font-size 0.38rem
    color #fff
    background #d7463c
.area-select-box
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
.area-select-box >>> .distpicker-address-wrapper
    position fixed
    top 200px
    left 0
    right 0
    bottom 0
.area-select-box >>> .distpicker-address-wrapper .address-container
    position absolute
    top 32px
    left 0
    right 0
    bottom 0
    overflow scroll
    -webkit-overflow-scrolling touch
.area-select-box >>> .distpicker-address-wrapper .address-container ul li.active
    color #d7463c
</style>
